<template>
    <el-row calss="row" v-if="!isEmpty || loading" v-loading="loading" element-loading-text="数据请求中。。。">
        <el-col :span="8" :offset="4">
            <el-carousel trigger="click" height="600px" :interval=5000 indicator-position="none" :autoplay=false>
                <el-carousel-item v-for="item in responseData?.picture_urls || []" :key="item">
                    <h3 text="item">{{ item }}</h3>
                </el-carousel-item>
            </el-carousel>
        </el-col>
        <el-col :span="6" :offset="2">
            <el-row class="row-col">
                <el-col :span="24" title="商品所属分类" class="el-detail-row-col-text">
                    {{ TypeMap.get(responseData?.category) }}
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" :title="responseData?.title || ''" class="el-detail-row-col-text">
                    {{ responseData?.name || '' }}
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" :title="responseData?.desc || ''" class="el-detail-row-col-text-min">
                    {{ responseData?.desc || '' }}
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" class="el-detail-row-col-text price">
                    ￥：{{ responseData?.price || 0 }}
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24" class="el-detail-row-col-bs">
                    <el-button color="#FF9402" size="large" title="加入购物车" @click="addProduct" :loading="buLoading"
                        class="el-detail-row-col-button">加入购物车</el-button>
                </el-col>
            </el-row>
        </el-col>
    </el-row>
    <el-empty v-if="isEmpty" description="暂无数据" style="width: 100%;" />
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import { HttpMethod } from '@/api/types';
import { TypeMap } from '@/api/typemapping';
import { apiRequest } from '@/api/apiService';
import { AuthService } from '@/api/authService';
import { ref, reactive, onMounted, computed, defineProps } from 'vue';

const route = useRoute();       // 使用 useRoute 获取当前路由信息
const loading = ref(false);     // loading标识
const isEmpty = ref(false);     // 无数据标识
const buLoading = ref(false);   // 按钮loading
const responseData = ref({      // 商品响应数据
    id: 0,
    name: '',
    category: 0,
    title: '',
    desc: '',
    price: 0,
    picture_urls: ['']
});
const props = defineProps({
    id: {
        type: String,
        required: true
    }
});

// 获取商品详情请求参数
const getProductParam = {
    id: ''
}

// 使用 onMounted 生命周期钩子在应用挂载后运行初始化函数
onMounted(() => {
    if (props.id.length > 0) {
        getProduct();
    } else {
        isEmpty.value = true;
    }
});

// 商品加购物车请求参数
const addParam = reactive({
    commodity_id: 0,
    commodity_count: 1
})

// 获取商品详情
const getProduct = () => {
    isEmpty.value = false;
    loading.value = true;
    getProductParam.id = props.id;
    getProductInfo();
}

// 添加商品进入购物车
const addProduct = () => {
    buLoading.value = true;
    // 判断是否登录
    if (AuthService.getToken() == '') {
        ElMessage({
            message: '请先登录后，再添加购物车！',
            type: 'error',
        });
        buLoading.value = false;
    } else {
        addParam.commodity_id = responseData.value.id;
        addParam.commodity_count = 1;
        toAddProduct();
    }
};

// 获取商品详情请求
const getProductInfo = async () => {
    try {
        const url = '/commodity/'+ getProductParam.id;
        const response = await apiRequest.request<any>(HttpMethod.GET, url);
        responseData.value = response;
        loading.value = false;
    } catch (error) {
        console.log(`request: /api/commodity/?id=${getProductParam.id} failed, error message: ${error}`);
        loading.value = false;
    }
};

// 发送加入购物车请求
const toAddProduct = async () => {
    try {
        const url = '/cart/';
        const customHeaders = { 'Authorization': AuthService.getToken() };
        await apiRequest.request<any>(HttpMethod.POST, url, addParam, customHeaders);
            ElMessage({
                message: '商品：' + responseData.value.name + '添加购物车成功！',
                type: 'success',
            });
            buLoading.value = false;
    } catch (error) {
        console.log('request: /api/cart failed, error message: ', error);
        buLoading.value = false;
    }
};
</script>

<style scoped>
.row {
    margin: 40px 0 30px 0;
}

.row-col {
    margin-top: 100px;
}


.el-detail-row-col-text {
    font-size: 24px;
    margin: 10px 5px;
    text-overflow: ellipsis;
    -webkit-user-select: none;
    /* 适用于Chrome、Safari等浏览器 */
    -moz-user-select: none;
    /* 适用于Firefox浏览器 */
    -ms-user-select: none;
    /* 适用于IE浏览器 */
    user-select: none;
    /* 标准语法，适用于现代浏览器 */
}

.el-detail-row-col-text-min {
    font-size: 20px;
    margin: 10px 5px;
    color: #C0C0C0;
    text-overflow: ellipsis;
    -webkit-user-select: none;
    /* 适用于Chrome、Safari等浏览器 */
    -moz-user-select: none;
    /* 适用于Firefox浏览器 */
    -ms-user-select: none;
    /* 适用于IE浏览器 */
    user-select: none;
    /* 标准语法，适用于现代浏览器 */
}

.el-detail-row-col-bs {
    text-align: center;
}

.el-detail-row-col-button {
    width: 40%;
    color: white;
    font-size: 24px;
}

.price {
    color: #FF4900;
}
</style>